<template>
    <div class="card-box">
        <div class="card-top">
            <div>{{ data.options.topLeftValue.name }}</div>
            <div>{{ data.options.topRightValue.name }}</div>
        </div>
        <div class="card-center">
            <div>
                <span>{{ data.options.centerLeftValue.name }}</span>
                <span>{{ data.options.centerLeftPer.name }}</span>
            </div>
            <div class="icon"><i :class="'iconfont '+data.options.iconName"/></div>
        </div>
        <ul class="card-bottom">
            <li v-for="(item,index) in data.options.bottomValue" :key="index">
                <span class="num">{{ item.num.name }}</span>
                <p class="text">{{ item.text.name }}</p>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'BaseCard',
    props: {
        data: {
            type: Object
        }
    }

}
</script>
<style lang="scss" scoped>
    .card-box{
        padding: 24px;
        background: #fff;
        box-shadow: 0px 3px 11px 0px #E8EAFC, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A;
        >div,>ul{
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            flex-direction: row;
            justify-content: space-between;
        }
        .card-top{
            font-weight: 500;
            font-size: calc(1.285rem);
        }
        .card-center{
            margin-top: 25px;
            span:nth-child(1){
                font-size: 42px;
                color: #666;
            }
            span:nth-child(2){
                font-size: 12px;
                color: red;
                line-height: 42px;
            }
            .icon{
                .iconfont{
                    font-size: 60px;
                }
            }
        }
        .card-bottom{
            li{
               padding: 16px 0;
                .num{
                    font-size: calc(1.142rem);
                    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
                    font-weight: 500;
                    line-height: 1.6;
                    letter-spacing: 0.0075em;
                }
                .text{
                    font-size: 12px;
                    color: rgb(110, 110, 110);
                    line-height: 1.5;
                }
            }
        }
    }
</style>
